<extend name="Layout/ins_base" />
<block name="content">
	<style>
		html, body {
			height: auto;
			background: #fff;
			margin: 0;
			padding: 0;
		}
		#title {
			background: #2794eb;
			height: 50px;
			width: 100%;
			line-height: 50px;
			color: #fff;
			font-size: 18px;
			text-align: center;
			position:fixed;
			width:100%;
			top:0px;
			z-index:2;
			padding-top:20px;
		}
		#search {
			position: fixed;
			height: 50px;
			width: 100%;
			margin: 0;
			padding: 0;
			top: 70px;
			background: #f2f2f2;
			border-bottom: 1px solid #ccc;
			z-index: 3;
		}
		#form_search {
			top: 0px;
			position: relative;
			margin-left: 15px;
			margin-right: 15px;
			line-height: 50px;
		}
		.user_list {
			height: 400px;
			overflow-y: auto;
		}
		.user_list li.tbody {
			cursor: pointer;
		}
		.avtar {
			border: 1px solid #ccc;
			border-radius: 50%;
			width: 50px;
			height: 50px;
		}
		.ul-table span {
			line-height: 24px;
		}
		.ul-table ul {
			border: 0px;
		}
		.ul-table li {
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
		}
		.ul-table ul li:last-child {
			border-bottom: 1px solid #ccc;
		}
		#dept_list {
			position: fixed;			
			top: 120px;
			z-index: 2;
			bottom: 0px;
			width: 100%;
			overflow-y: scroll;
			width:calc(100vw + 11px);			
			margin-bottom: 0px;
		}
		.sub-sidebar.gray {
			padding-top: 10px;
			padding-left: 10px;
		}
		#dept {
			position: fixed;
			top: 120px;
			height: 50px;
			width: 100%;
			background: #f2f2f2;
			padding-left: 20px;
			padding-right: 20px;
			border-bottom: 1px solid #ccc;
			z-index: 1;
		}
		#dept span {
			line-height: 50px;
		}
		#contact {
			margin-top: 170px;
		}
		#open_dept {
			margin-right: 20px;
			float: right;
			line-height: 50px;
		}

	</style>
	<div id="title">
		通讯录
	</div>
	<div id="search">
		<form name="form_search" id="form_search" method="post" >
			<div class="input-inline" style="width:100%;" >
				<input class="input" type="text" name="keyword" id="keyword">
				<a class="add-on" id="submit_search"><i class="fa fa-search"></i></a>
			</div>
		</form>
	</div>
	<div id="dept">
		<span id="dept_name"></span>
		<a class="toggle_adv_search" id="open_dept"><i id="toggle_adv_search_icon" class="fa fa-chevron-down"></i></a>
	</div>
	<div class="sub-frame" >
		<div class="sub-sidebar gray" id="dept_list">
			<?php echo $menu ?>
		</div>
		<div class="sub-content" id="contact" >
			<div class="ul-table">
				<ul>
					<foreach name="search" val="vo">
						<li>
							<span class="col-8 text-center"><img class="pic avtar" src="{$vo.pic}"></span>
							<span class="col-19 x1">
								<div class="frame">
									<div class="box col-12">
										<div class="">
											<span class="name">{$vo.name}</span><span class="position">{$vo.position_name}</span>
										</div>
										<div class="">
											<span class=" dept">{$vo.dept_name}</span>
										</div>
									</div>
									<div class="box col-12">
										<div>
											<a class="mobile_tel" href="tel:{$vo.mobile_tel}">{$vo.mobile_tel}</a>
										</div>
										<div>
											<span class="email ">{$vo.email}</span>
										</div>
									</div>
								</div></span>
						</li>
					</foreach>
				</ul>
			</div>
		</div>
	</div>
	<div id="sample" class="hidden"  >
		<li>
			<span class="col-8 text-center"><img class="pic avtar" src=""></span>
			<span class="col-19 x1">
				<div class="frame">
					<div class="box col-12">
						<div class="">
							<span class="name"></span><span class="position"></span>
						</div>
						<div class="">
							<span class=" dept">总经理办公室</span>
						</div>
					</div>
					<div class="box col-12">
						<div>
							<span class="mobile_tel"></span>
						</div>
						<div>
							<span class="email "></span>
						</div>
					</div>
				</div></span>
		</li>
	</div>
</block>
<block name="js">
	<script>
		layui.use(['global'], function() {
			var $ = layui.jquery;
			$("#open_dept").click(function() {
				$("#dept_list").css('display', 'block');
			});
			$(".sub-sidebar .tree_menu a").click(function() {
				$(".sub-sidebar .tree_menu a").each(function() {
					$(this).attr("class", "");
				});
				$(this).attr("class", "active");
				$("#dept_list").css("display", "none");
				$("#dept_name").text($(this).text());
				send_ajax("{:url('read')}", "id=" + $(this).attr("node"), function(ret) {
					show_data(ret);
				});
				return false;
			});

			function show_data(ret) {
				$(".ul-table ul li").remove();
				for (var s in ret.data) {
					$("#sample .emp_no").text(ret.data[s].emp_no);
					$("#sample .name").text(ret.data[s].name);
					$("#sample .position").text(ret.data[s].position_name);
					$("#sample .dept").text(ret.data[s].dept_name);
					$("#sample .email").text(ret.data[s].email);
					$("#sample .pic").attr('src', ret.data[s].pic);
					$mobile = $("<a></a>");
					$mobile.attr("href", "tel:" + ret.data[s].mobile_tel);
					$mobile.html(ret.data[s].mobile_tel);

					$("#sample .mobile_tel").html($mobile);
					html = $("#sample").html();
					$(".ul-table ul").append(html);
					$("#sample li span a").text("");
				}
			}

		});
	</script>
</block>